/*
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-10-03 16:49:38
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-17 09:27:28
 */
import { v4 as uuid } from 'uuid'
import commonMixin from '../mixins/base.js'
import { Modify } from 'ol/interaction';
import Collection from 'ol/Collection';
import { MiningStyle } from '../Style/index.js';

export default {
  name: 'FeatureBase',
  mixins: [commonMixin('feature')],
  props: {
    feature: {
      type: Object,
      default ( ){
        return null
      }
    },
    // 是否可以编辑要素
    canModifyGeom: {
      type: Boolean,
      default (){
        return false
      }
    },
    // 是否可以编辑要素样式
    canModifyStyle: {
      type: Boolean,
      default (){
        return false
      }
    },
    // 是否可以编辑要素属性
    canModifyProperties: {
      type: Boolean,
      default (){
        return false
      }
    },
    // 删除
    canRemove: {
      type: Boolean,
      default (){
        return false
      }
    },
    // 自定义菜单
    customContextMenus: {
      type: Array,
      default (){
        return []
      }
    },
  },
  computed:{
    needModify () {
      return this.canModifyGeom || this.canModifyProperties || this.canModifyStyle
    }, 
  },
  data() {
    return {
      id: uuid(),
      modify: null,
      editing: false,
      _originFeature: null,
      localFeature: null
    }
  },
  created() {
    console.log('FeatureBase Created')
  },
  beforeDestroy() {
    this.dispose()
  },
  watch: {
    feature: {
      immediate: true,
      handler () {
        this.resetFeature()
      }
    }
  },
  methods: {
    resetFeature () {
      let properties =  this.feature.get('properties')
      let style = properties && properties.style 
      let localStyle = null     
      if(style) {
        localStyle = new MiningStyle()
        localStyle.fromJSON(JSON.parse(style))
      }
      this._originFeature = this.feature.clone()
      this.localFeature = this.feature.clone()
      this.localFeature.setId(this.id)
      this._originFeature.setId(this.id)

      // 使用自有样式
      this.localFeature.setStyle(localStyle)
      this._originFeature.setStyle(localStyle)

    },
    load () {
      console.log('11 feature load', this.layer, this.localFeature)
      if(this.layer) {
        const source = this.layer.getSource() 
        console.log('source', source)
        if(this.localFeature) {
          if(source.hasOwnProperty('source')) {
            source.source.addFeature(this.localFeature)

          } else {
            source.addFeature(this.localFeature)

          }
        } 
        console.log(`[${this.$options.name}]初始化完毕，并加载到图层`) 
      } else {
        throw new Error('图层不可用')
      }      
    },
    dispose () {
      console.log('11 feature dispose', this.layer, this.localFeature)
      if(this.layer) {
        const source = this.layer.getSource() 
        if(this.localFeature) {
          let f = source.getFeatureById(this.localFeature.getId())
          source.removeFeature(f)
          // source.refresh()
        } 
        console.log(`[${this.$options.name}]要素卸载`) 
      }  
    },
    // 获取编辑右键菜单
    getModifyContextMenus (editing) {
      if(this.customContextMenus && this.customContextMenus.length > 0) {
        return this.customContextMenus
      }
      let customContextMenus = []    
      if(editing) {
        customContextMenus = [{
          name: '结束编辑',
          handler: () => {
            this.endFeatureEdit()
          }
        },{
          name: '取消编辑',
          handler: () => {
            this.cancelFeatureEdit()
          }
        }]
      } else {
          if(this.canModifyGeom) {
            customContextMenus.push(
              {
                name: '编辑要素',
                handler: () => {
                  this.startFeatureEdit()
                }
              }
            )
          }

          if(this.canModifyStyle) {
            customContextMenus.push(
              {
                name: '编辑样式',
                handler: () => {
                  console.log('editFeatureStyle', this.feature)
                  this.startModifyStyle()
                }
              }
            )
          }

          if(this.canRemove) {
            customContextMenus.push(
              {
                name: '删除',
                handler: () => {
                  this.$emit('remove', this.feature)
                }
              }
            )
          }
      }
      return customContextMenus      
    },
    startFeatureEdit () {
      let feature = this.localFeature
      let collection = new Collection([feature])
      if(this.modify) {
        this.modify = new Modify({features: collection});
      }  else {
        this.modify = new Modify({features: collection});
        this.modify.on('modifyend', this.handleModifyEnd) 
      }
      this.map.addInteraction(this.modify);
      this.editing = true
      this.$parent.startModify && this.$parent.startModify(feature)
    },
    handleModifyEnd (evt) {
      // let feature = evt.features.item(0)
      // this._unSaveFeature = feature
    },
    endFeatureEdit  () {
      this.map.removeInteraction(this.modify);
      this.editing = false
      this.$parent.endModify && this.$parent.endModify()
      this.$emit('updated', this.localFeature)
      this._originFeature = this.localFeature.clone()
      this._originFeature.setId(this.id)  
    },
    cancelFeatureEdit () {
      this.map.removeInteraction(this.modify);
      this.editing = false
      this.$parent.endModify && this.$parent.endModify()
      const source = this.layer.getSource() 
      source.removeFeature(this.localFeature)
      this.localFeature = this._originFeature.clone()
      this.localFeature.setId(this.id)
      source.addFeature(this.localFeature) 
    },
    startModifyStyle () {
      this.$parent.startModifyStyle && this.$parent.startModifyStyle(this.localFeature)
    },
    endStyleEdit(style) {
      this.localFeature.setStyle(style)
      console.log('this.localFeature', this.localFeature.getStyle())
      let properties = this.localFeature.get('properties')
      
      // if(properties.style) {
        properties.style = JSON.stringify(style.toJSON())
      // }
      this.localFeature.set('properties', properties)
      this.$emit('updated', this.localFeature)
      this._originFeature = this.localFeature.clone()
      this._originFeature.setId(this.id)  
    }
  },
  render () { return '' }

}